<template>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <Form class="mt-4" :model="user" label-position="top">
                    <FormItem label="用户名">
                        <Input v-model="user.name"></Input>
                    </FormItem>
                    <FormItem label="电子邮件">
                        <Input type='email' v-model="user.email"></Input>
                    </FormItem>
                    <FormItem label="密码">
                        <Input type="password" placeholder="******" v-model="user.password"></Input>
                    </FormItem>
                    <FormItem label="角色">
                        <Select
                                v-model="selectedRoles"
                                multiple
                                filterable
                                remote
                                :remote-method="searchRole"
                                :loading="loading">
                            <Option v-for="(option, index) in roles" :value="option.name" :key="index">{{option.name}}
                            </Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <img style="width:180px;height:180px" :src="avatarUrl"/>
                        <Upload class="mt-2" :on-success='uploadSuccess' :on-error='uploadError'
                                action="http://admin.io/api/file">
                            <Button icon="ios-cloud-upload-outline">选择头像</Button>
                        </Upload>
                    </div>
                </div>
            </div>
        </div>
        <Button @click="update" type="info">保存</Button>
    </div>
</template>

<script>
    export default {
        name: "UserEdit",
        mounted() {
            this.id = this.$route.params.id;
            this.getRoles();
        },
        methods: {
            getRoles() {
                http.get('/api/role').then((data) => {
                    this.roles = data;
                    this.getUserDetail();
                });
            },
            getUserDetail() {
                http.get('/api/user/' + this.id).then((data) => {
                    this.user = data;
                    if(this.user.avatar) {
                        this.avatar = this.user.avatar;
                        this.avatarUrl = api.file + "/" +this.avatar;
                    }
                    data.roles.forEach((item) => {
                        this.selectedRoles.push(item.name)
                    })
                });
            },
            uploadSuccess(event, file, fileList) {
                this.avatar = file.response.data;
                this.avatarUrl = api.file+"/" + this.avatar;

            },
            uploadError(event, file, fileList) {

                console.log('-----+++++')
            },
            searchRole(key) {

            },
            update() {
                console.log(this.selectedRoles);
                let params = new URLSearchParams();
                params.append('name', this.user.name);
                params.append('email', this.user.email);
                params.append('password', this.user.password);
                params.append('avatar',this.avatar);
                params.append('roles', JSON.stringify(this.selectedRoles));
                http.put('/api/user/' + this.id, params).then((data) => {
                    console.log(data);
                });
            }
        },
        data() {
            return {
                loading: false,
                selectedRoles: [],
                roles: [],
                avatar: '',
                avatarUrl: '',
                user: {}
            }
        }
    }
</script>

<style scoped>

</style>
